<template>
    <view class="container">
        <uv-popup ref="popup" mode="bottom" round="10">
            <view class="prompt p-30">
                <view class="prompt__title fs-34 fw-600">服务协议和隐私政策</view>
                <view class="prompt__img my-20">
                    <image src="/static/logo.png" class="h-100 w-100vw"></image>
                </view>
                <view class="prompt__content fs-28 lh-50 text-justify">
                    感谢选择心之翔小程序、我门非常重视您的个人信息安全和隐私保护。依据最新法律要求，使用我门的产品前，请仔细阅读并同意<view class="inline">
                        <navigator class="inline-block">《服务协议》、</navigator>
                        <navigator class="inline-block">
                            《隐私政策》、</navigator>
                        <navigator class="inline-block">《社区规范》，</navigator>
                    </view>以便我们向提供更优质的服务！我们承诺将尽全力保护你个人信息及合法权益，再次感谢您的信任！
                </view>
                <view class="prompt__btn my-30 flex justify-between">
                    <view class="w-250">
                        <uv-button text="拒绝" color="#e8eafb" :custom-style="{color:'#7a73b0'}" size="large"></uv-button>
                    </view>
                    <view class="flex-1 ml-20">
                        <uv-button text="同意并继续" color="#7f72e4" size="large" @click="popup.close()"></uv-button>
                    </view>
                </view>
            </view>
        </uv-popup>
        <view class="container__icon">
            心之翎{{props}}
        </view>
        <view class="container__desc" v-show="type=='login'">
            <view>守护每一份情绪</view>
            <view>点亮每一束心光</view>
        </view>
        <view class="container__buttons" v-show="type=='login'">
            <MyButton title="微信一键登录" :transition="true" icon="fx-e60d" height="80rpx" color="#fff" bordeRadius="14rpx"
                fontSize="30rpx"></MyButton>
            <MyButton @click="type='register'" :customStyles="{marginTop:'25rpx'}" title="短信验证码登录" height="80rpx"
                bordeRadius="14rpx" fontSize="30rpx">
            </MyButton>
        </view>
        <view class="container__inputs" v-show="type=='register'">
            <uv-form>
                <uv-form-item>
                    <uv-input placeholder="请输入手机号"
                        :customStyle='{background:"#fff",borderRadius:"10rpx",padding:"15rpx 25rpx"}' border="none">
                        <template v-slot:prefix class="container__inputs-label">
                            <view class="container__inputs-label">手机号</view>
                        </template>
                    </uv-input>
                </uv-form-item>
                <uv-form-item>
                    <uv-input placeholder="请输入6位验证码"
                        :customStyle='{background:"#fff",borderRadius:"10rpx",padding:"15rpx 25rpx"}'>
                        <template v-slot:prefix>
                            <view class="container__inputs-label">验证码</view>
                        </template>
                        <template v-slot:suffix>
                            <uv-button size="mini" :customStyle="{background:'#dbddf6',border:'none',color:'#958ce7'}"
                                :text="tips" type="success" @click="getCode"></uv-button>
                            <uv-code seconds="20" changeText="x秒重新获取" ref="uCode" @change="codeChange"></uv-code>
                        </template>
                    </uv-input>
                </uv-form-item>
            </uv-form>
        </view>
        <view :class="[' container__agreement-text',{'container__agreement-text--register':type=='register' }]">
            <uv-checkbox-group>
                <uv-checkbox shape="circle" :customStyle="{marginBottom: '8px'}" name="agree">
                    <label class="container__agreement-label">
                        <text>阅读并同意心之翎</text>
                        <navigator>《用户协议》</navigator>和<navigator>《隐私政策》</navigator>
                        <navigator>《社区规范》</navigator>
                    </label>

                </uv-checkbox>
            </uv-checkbox-group>
        </view>
        <view class="container__buttons" v-show="type=='register'">
            <MyButton title="登录/注册" :transition="true" height="80rpx" color="#fff" bordeRadius="14rpx" fontSize="30rpx">
            </MyButton>
        </view>
        <view :class="['container__action-button',{'container__action-button--register':type=='register'}]">
            <MyButton title="取消登录" type="text" color="#a7aab9" @click="type='login'"></MyButton>
        </view>


    </view>
</template>

<script setup>
    import {
        onMounted,
        ref
    } from "vue";
    import MyButton from "@/components/Button.vue";
    const type = ref('register');
    let tips = ref('');
    const uCode = ref(null);
    const popup = ref('');
    const getCode = () => {
        uCode.value.start();
    };

    const codeChange = (text) => {
        tips.value = text;
    };
    onMounted(() => {
        setTimeout(() => {
            popup.value.open();
        }, 2000)
    })
</script>

<style scoped lang="scss">
    .prompt {
        &__img {
            image {
                width: 100%;
            }
        }

        &__title {
            color: #746ac9;
        }

        navigator {
            color: #7f72e3
        }
    }

    .container {
        background-color: #eaeaff;
        height: 100vh;

        @include flex-center(column);

        box-sizing: border-box;

        &__icon {
            border: 1px #000 solid;
            width: 120rpx;
            height: 120rpx;
            margin-bottom: 50rpx;
        }

        &__desc {
            color: #9A93D7;
            font-size: 65rpx;
            line-height: 100rpx;
            font-weight: 100;
            padding-bottom: 120rpx;
        }

        &__agreement-text {
            padding: 160rpx 0 80rpx 0;

            navigator {
                color: #958be8;
            }

            &--register {
                padding: 40rpx 0 50rpx 0;
            }
        }

        &__agreement-label {
            display: flex;
            justify-content: center;

            font-size: 20rpx;
        }

        &__inputs {
            width: 80%;

            &-label {
                @include flex-center;

                &::after {
                    content: "";
                    border-right: 1px #f9f8fa solid;
                    width: 25rpx;
                    display: inline-block;
                    height: 40rpx;
                    margin-right: 20rpx;
                }


            }
        }

        &__action-button {
            justify-content: center;
            display: flex;

            &--register {
                margin-top: 180rpx;
            }
        }

        &__buttons {
            width: 80%;
        }
    }
</style>